<template>
  <div class="row border-bottom" id="header">
    <!-- 导航内容-->
    <div class="ml-5 pb-3 col-md-8 mt-3" >
      <span class="mr-3 iconbox iconsmall fill rounded-circle bg-white text-black shadow border-0"><i class="fa fa-book fa-lg" aria-hidden="true" id="fa-book"></i></span>
      <a class="navbar-brand ml-1"  style="font-size: 25px;color:whitesmoke;"><strong>嘉庚考研圈后台管理</strong></a>
    </div>
    <div class="fontclass text-right col-md-3 mt-4 ml-5">
      <i class="fa fa-user-circle pr-1" style="color: whitesmoke"></i>
      <el-tooltip placement="top" v-show="showButton">
        <div slot="content" style="font-size: 15px" class="p-2">登录</div>
        <a href="javascript:void(0);"  @click="login" style="color: whitesmoke">登录</a>
      </el-tooltip>
      <el-tooltip placement="top" v-show="!showButton">
        <div slot="content" style="font-size: 15px;" class="p-2">退出登录</div>
        <a href="javascript:void(0);" v-show="!showButton" @click="quit" style="color: whitesmoke">退出登录</a>
      </el-tooltip>
    </div>

  </div>
</template>
<script>

export default {
  name: 'myheader',
  data(){
    return{
      showButton:false,

    }
  },
  methods:{
    login(){
      if(this.$router.history.current.path !='/'){
        this.$router.push({path:'/'});
      }
    },
    //  退出登录
    quit(){
      sessionStorage.clear();
      this.$router.push({path:'/'});

    }




  },
  created() {
    //未登录 没有token
    if(!window.sessionStorage.getItem('token') || window.sessionStorage.getItem('token')==null || window.sessionStorage.getItem('token')===''|| window.sessionStorage.getItem('token')===undefined){
      this.showButton=true;  //显示登录注册的按钮
    }
  }
}
</script>

<style scoped>
/* 导航栏 */
#header {
  background-image: linear-gradient(to bottom, #051937, #1b253e, #2c3245, #3d404b, #4d4e52);
}
#nav_contain>li>a
{
  font-size: 20px;
  color: black;
  font-weight: bold;
}
#nav_contain>li>a:hover
{
  color: #005CBF;
}
.fontclass a{
  font-size: 20px;
  font-weight: bold;
  color: #333333;
}
.fontclass a:hover{
  color: #0f5da2;
}

</style>
